<template>
  <div class="character">
    
      <van-row justify="end" class="character-row">
        <van-col span="12">角色名：xxx</van-col>
        <van-col span="12">职业：战士</van-col>
      </van-row>

      <van-row justify="end" class="character-row">
        <van-col span="12">力量：100</van-col>
        <van-col span="12">法力：100</van-col>
      </van-row>


      <van-row justify="end" class="character-row">
        <van-col span="12">力量：100</van-col>
        <van-col span="12">法力：100</van-col>
      </van-row>


      <van-row justify="end" class="character-row">
        <van-col span="12">力量：100</van-col>
        <van-col span="12">法力：100</van-col>
      </van-row>


      <van-row justify="end" class="character-row">
        <van-col span="12">力量：100</van-col>
        <van-col span="12">法力：100</van-col>
      </van-row>

      <van-row justify="end" class="character-row">
        <van-col span="24">当前经验：100</van-col>
      </van-row>

      <van-row justify="end" class="character-row">
        <van-col span="24">下一级经验：100</van-col>
      </van-row>
    
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { reactive , toRefs } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores'
import { socket } from '../hooks/socket'

export default {
  name: "home",
  setup(){
    const router = useRouter();
    socket.init();
    const state = reactive({
      msg: '',
      msgList: []
    });

    const store = useCounterStore()

    let username = "";

    onMounted (() => {
       console.log("on-mounted")
    })

    
    const handleSendBtnClick = () => {
        const _msg = state.msg;
        if(!_msg.trim().length){
          return;
        }

        socket.send(JSON.stringify({
          id: new Date().getTime(),
          user: username,
          dateTime: new Date().getTime(),
          msg: _msg
        }),() => {
          console.log('我是回调函数' + store.count)
          
        });

        // state.msg = ""
    }

   

    // function handleMessage(e) {
    //    console.log('收到数据',e.data)
    //    state.msgList.push(JSON.parse(e.data))
    // }
  

    return {
      ...toRefs(state)
    }
  }
}
</script>


<style lang="less">
.character {
  
  width: 100%;
  height: 15rem;
  font-size: 16px;
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
  padding-top: 1rem;
  color: black;

  &-row{
    padding-left: 0.3rem;
    
  }
}


</style>